<template>
  <!-- 专业名，学科名，题型的增加和修改，不能删除 -->
  <div>
      <!-- 导航栏 -->
    <div>
        <el-menu 
            default-active="1"
            class="el-menu-demo" 
            mode="horizontal" 
            text-color="#000000"
            active-text-color="#ffd04b"
            @select="handleSelect">
            <el-menu-item index="1">专业管理</el-menu-item>
            <el-menu-item index="2">学科管理</el-menu-item>
            <el-menu-item index="3">题型管理</el-menu-item>
            <el-menu-item index="4">人脸库组</el-menu-item>
        </el-menu>
    </div>
    <!-- 展示前三个属性主体 -->
    <div v-show="nowIndex!=4">
        <el-container>
            <el-header align="center" style="padding:20px">
                <el-button @click="addItem()"  type="warning" plain style="position:absolute;left:10%">{{buttonName}}</el-button>
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select" style="width:40%" @keyup.enter.native="find(input)">
                    <el-button slot="append" icon="el-icon-search" @click="find(input)"></el-button>
                </el-input>
            </el-header>
        </el-container>
        
        <el-container>
            <el-aside width="2%">

            </el-aside>
            <el-main width="80%">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    :row-class-name="tableRowClassName">
                    <el-table-column
                        align="center"
                        label="序号">
                        <template slot-scope="scope">
                            <span>{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        :prop=name
                        label="名称">
                    </el-table-column>
                     <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">修改名称</el-button>
                        </template>
                    </el-table-column>
                     <el-table-column  v-if="nowIndex==3" label="下方添加题型" align="center">
                        <template slot-scope="scope">
                            <el-button
                            circle
                            icon="el-icon-circle-plus-outline"
                            @click="addType(scope.row)"></el-button>  
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
    <div v-show="nowIndex==4">
        <el-container>
            <el-header  style="padding:20px">
                <el-button type="warning" plain @click="addFaceGroup()">添加人脸库组</el-button>
            </el-header>
            <el-main>
                <el-table
                    v-loading="loading"
                    :data="faceList"
                    :row-class-name="tableRowClassName">
                    <el-table-column
                        align="center"
                        label="序号">
                        <template slot-scope="scope">
                            <span>{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="id">
                    <template slot-scope="scope">
                            <span>{{scope.row}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
    <!-- 人脸库组的添加和显示 -->

  </div>
</template>

<script>
export default {
    data(){
        return{
            nowIndex:'1',//目前的菜单栏指向
            input:'',
            
            buttonName:"添加专业",
            loading: false,
            name:'major',
            tableData:[],//表格中显示的数据

            majorList:[],//专业map
            subjectList:[],//科目map
            typeList:[],//题型map

            faceList:[],//人脸库id
        }
    },
    mounted(){
        this.getFaceGroup()
        this.getMajorMap().then(()=>{
            this.tableData = this.majorList;
        })
        this.getSubjectMap();
        this.getTypeMap();
    },
    methods:{
        // 关于表格的样式
        tableRowClassName({rowIndex}) {
            if (rowIndex*1%4==0) {
            return 'warning-row';
            } else if (rowIndex*1%4==2) {
            return 'success-row';
            }
            return '';
        },
        // 三个管理的切换
        handleSelect(key) {
            this.nowIndex = key;
            if(key==1){
                this.name = "major"
                this.buttonName = "添加专业"
                this.tableData = this.majorList;
            }
            else if(key==2){
                this.name = "subject"
                this.buttonName = "添加学科"
                this.tableData = this.subjectList;
            }
            else if(key==3){
                this.name = "type"
                this.buttonName = "顶部添加题型"
                this.tableData = this.typeList;
            }
        },
        // 查询
        find(name){
            this.loading = true;
            if(this.nowIndex==1){
                this.getMajorByName(name).then(()=>{
                    this.tableData = this.majorList;
                    this.loading = false;
                })
            }
            else if(this.nowIndex==2){
                this.getSubjectByName(name).then(()=>{
                    this.tableData = this.subjectList;
                    this.loading = false;
                })
            }
            else if(this.nowIndex==3){
                this.getTypeByName(name).then(()=>{
                    this.tableData = this.typeList;
                    this.loading = false;
                })
            }
        },
        // 修改
        handleEdit(row){
            this.$prompt('请输入名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({value}) => {
                if(this.nowIndex==1){
                    this.updateOneMajor(row,value);
                }
                else if(this.nowIndex==2){
                    this.updateOneSubject(row,value);
                }
                else if(this.nowIndex==3){
                    this.updateOneType(row,value);
                }
                
            })
        },
        // 添加
        addItem(){
            this.$prompt('请输入名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({value}) => {
                this.$confirm('添加后不允许删除，是否添加？', '警告', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '放弃'
                }).then(() =>{
                    if(this.nowIndex==1){
                        this.addOneMajor(value).then(()=>{
                            this.tableData = this.majorList
                        })
                    }
                    else if(this.nowIndex==2){
                        this.addOneSubject(value).then(()=>{
                            this.tableData = this.subjectList
                        })
                    }
                    else if(this.nowIndex==3){
                        var type = {id:'',type:value}
                        this.getTypeMap().then(()=>{
                            this.tableData = this.typeList
                            type.id = this.tableData[0].id/2
                            this.addOneType(type)
                        })
                        
                    }
                })  
            })
        },
        // 添加题型
        addType(row){
            this.$prompt('请输入名称', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({value}) => {
                this.$confirm('您在此处添加的题型和试卷布局相关，是否添加在此处？', '警告', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '放弃'
                }).then(() =>{
                    var newId
                    this.getTypeMap().then(()=>{
                        // console.log("正在指定新的id")
                        var length = this.tableData.length
                        for(var i=0;i<length;i++){
                            // console.log(i)
                            if(this.tableData[i].id==row.id){
                                if(i==this.tableData.length-1){
                                    newId = parseFloat(this.tableData[i].id)+1
                                }
                                else{
                                    newId = parseFloat(this.tableData[i].id)+parseFloat(this.tableData[i+1].id)
                                    newId = newId/2
                                }
                                break
                            }
                        }
                        this.addOneType(newId,value)
                        // console.log(newId,value)
                    })
                    
                })  
            })
        },
        // 根据名称模糊查询专业
        async getMajorByName(name){
            let result =
                await this.$API.attribute_management.getMajorByName(name);
            if (result.code == 20000) {
                this.majorList = result.data.majors
            }
        },
        // 根据名称模糊查询科目
        async getSubjectByName(name){
            let result =
                await this.$API.attribute_management.getSubjectByName(name);
            if (result.code == 20000) {
                this.subjectList = result.data.subjects
            }
        },
        // 根据名称模糊查询题型
        async getTypeByName(name){
            let result =
                await this.$API.attribute_management.getTypeByName(name);
            if (result.code == 20000) {
                this.typeList = result.data.types
            }
        },
        // 获取所有专业map
        async getMajorMap(){
            let result =
                await this.$API.attribute_management.getMajorMap();
            if (result.code == 20000) {
                this.majorList = result.data.majorList
            }
        },
        // 增加一个专业
        async addOneMajor(major){
            let result =
                await this.$API.attribute_management.addOneMajor(major);
                
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                    });
                this.getMajorMap().then(()=>{
                    this.tableData = this.majorList
                })
            }
            else{
                this.$message({
                    showClose: error,
                    message: '添加失败',
                    type: 'success'
                    });
            }
        },
        // 修改一个专业名字
        async updateOneMajor(major,value){
            var major1 = {id:'',major:''}
            major1.id = major.id
            major1.major = value
            let result =
                await this.$API.attribute_management.updateOneMajor(major1);
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                    });
                major.major = value
            }
            else{
                this.$message({
                    showClose: error,
                    message: '修改失败',
                    type: 'success'
                    });
            }
        },
        // 获取所有科目map
        async getSubjectMap(){
            let result =
                await this.$API.attribute_management.getSubjectMap();
            if (result.code == 20000) {
                this.subjectList = result.data.subjectList
            }
        },
        // 增加一个科目
        async addOneSubject(subject){
            let result =
                await this.$API.attribute_management.addOneSubject(subject);
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                    });
                this.getSubjectMap().then(()=>{
                    this.tableData = this.subjectList
                })
            }
            else{
                this.$message({
                    showClose: error,
                    message: '添加失败',
                    type: 'success'
                    });
            }
        },
        // 修改一个科目名字
        async updateOneSubject(subject,value){
            var subject1 = {id:'',subject:''}
            subject1.id = subject.id
            subject1.subject = value
            let result =
                await this.$API.attribute_management.updateOneSubject(subject1);
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                    });
                subject.subject = value;
            }
            else{
                this.$message({
                    showClose: error,
                    message: '修改失败',
                    type: 'success'
                    });
            }
        },
        // 获取所有题型map
        async getTypeMap(){
            let result =
                await this.$API.attribute_management.getTypeMap();
            if (result.code == 20000) {
                this.typeList = result.data.typeList
            }
        },
        // 增加一个题型
        async addOneType(id,type){
            let result =
                await this.$API.attribute_management.addOneType(id,type);
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                    });
                this.getTypeMap().then(()=>{
                    this.tableData = this.typeList
                })
            }
            else{
                this.$message({
                    showClose: error,
                    message: '添加失败',
                    type: 'success'
                    });
            }
        },
        // 修改一个题型名字
        async updateOneType(type,value){
            var type1 = {id:'',type:''}
            type1.id = type.id
            type1.type = value
            let result =
                await this.$API.attribute_management.updateOneType(type1);
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                    });
                type.type = value
            }
            else{
                this.$message({
                    showClose: error,
                    message: '修改失败',
                    type: 'success'
                    });
            }
        },

        // 查询人脸库数组
        async getFaceGroup(){
            let result =
                await this.$API.attribute_management.getFaceGroup();
            if (result.code == 20000) {
               this.faceList = result.data.groups
            }
        },
        
        // 添加人脸库组
        async addFaceGroup()
        {
            let result =
                await this.$API.attribute_management.addFaceGroup();
            if (result.code == 20000) {
               this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                    });
            }
        }
    }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>